{% block sw_sales_channel_products_assignment_single_products %}
<mt-card
    class="sw-sales-channel-products-assignment-single-products"
    position-identifier="sw-sales-channel-products-assignment-single-products"
    :is-loading="isLoading"
>
    <div :style="containerStyle">
        {% block sw_sales_channel_products_assignment_single_products_secondary %}
        <sw-card-section
            ref="cardSectionSecondary"
            secondary
        >
            {% block sw_sales_channel_products_assignment_single_products_search_field %}
            <sw-simple-search-field
                v-model:value="searchTerm"
                variant="form"
                size="small"
                @search-term-change="onChangeSearchTerm"
            />
            {% endblock %}
        </sw-card-section>
        {% endblock %}

        {% block sw_sales_channel_products_assignment_single_products_primary %}
        <sw-card-section
            class="sw-sales-channel-products-assignment-single-products__card-section-primary"
            divider="top"
        >
            {% block sw_sales_channel_products_assignment_single_products_primary_listing %}
            <sw-entity-listing
                v-if="products.length > 0"
                identifier="sw-sales-channel-products-assignment-single-products-list"
                :repository="productRepository"
                :items="products"
                :columns="productColumns"
                :plain-appearance="true"
                :skeleton-item-amount="limit"
                :is-loading="isLoading"
                :allow-column-edit="false"
                :allow-inline-edit="false"
                :allow-delete="false"
                :show-actions="false"
                :show-settings="false"
                @selection-change="onSelectionChange"
                @select-item="onSelectionChange"
                @select-all-items="onSelectionChange"
            >
                <template #pagination>
                    {% block sw_sales_channel_products_assignment_single_products_primary_listing_pagination %}
                    <sw-pagination
                        v-bind="{ page, limit, total }"
                        :total-visible="3"
                        :auto-hide="false"
                        @page-change="onChangePage"
                    />
                    {% endblock %}
                </template>
            </sw-entity-listing>
            {% endblock %}

            {% block sw_sales_channel_products_assignment_single_products_primary_empty_state %}
            <sw-empty-state
                v-else
                :show-description="false"
                :title="$tc('sw-sales-channel.detail.products.titleEmptyState')"
            >
                <template #icon>
                    <img
                        :src="assetFilter('/administration/administration/static/img/empty-states/products-empty-state.svg')"
                        :alt="$tc('sw-sales-channel.detail.products.titleEmptyState')"
                    >
                </template>
            </sw-empty-state>
            {% endblock %}
        </sw-card-section>
        {% endblock %}
    </div>
</mt-card>
{% endblock %}
